<script setup>
import { strokeType } from "@/utils/dict"
const props = defineProps(["options"])
const option = toRef(props, "options")
</script>

<template>
  <div class="component-box">
    <a-form-item label="显示背景色">
      <xiri-form v-model="option.showBackground" option="switch" />
    </a-form-item>
    <template v-if="option.showBackground">
      <a-form-item label="背景色">
        <xiri-form v-model="option.backgroundStyle.color" option="color" />
      </a-form-item>
      <a-form-item label="描边颜色">
        <xiri-form v-model="option.backgroundStyle.borderColor" option="color" />
      </a-form-item>
      <a-form-item label="描边宽度">
        <xiri-form v-model="option.backgroundStyle.borderWidth" option="number" />
      </a-form-item>
      <a-form-item label="描边类型">
        <xiri-form v-model="option.backgroundStyle.borderType" option="select" :optionList="strokeType" />
      </a-form-item>
      <a-form-item label="圆角半径">
        <xiri-form v-model="option.backgroundStyle.borderRadius" option="number" />
      </a-form-item>
      <a-form-item label="阴影大小">
        <xiri-form v-model="option.backgroundStyle.shadowBlur" option="number" />
      </a-form-item>
      <a-form-item label="阴影颜色">
        <xiri-form v-model="option.backgroundStyle.shadowColor" option="color" />
      </a-form-item>
      <a-form-item label="阴影水平偏移">
        <xiri-form v-model="option.backgroundStyle.shadowOffsetX" option="number" />
      </a-form-item>
      <a-form-item label="阴影垂直偏移">
        <xiri-form v-model="option.backgroundStyle.shadowOffsetY" option="number" />
      </a-form-item>
      <a-form-item label="透明度">
        <xiri-form v-model="option.backgroundStyle.opacity" :step="0.1" min="0" max="1" option="number" />
      </a-form-item>
    </template>
  </div>
</template>

<style scoped lang="less"></style>
